<template>
    <div :class="['ph-form-tip',type?'ph-form-tip-'+type:'']">
        <span><slot></slot></span>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props:{type:{type:String}}
})
</script>

<style lang="scss" scoped>
.ph-form-tip{
    font-size: var(--ph-fs-small);
    color: #6c757d;
    position: absolute;
    right: 0;
    top: 100%;
    padding: 2px 0;
    span{
        display: inline-block;
    }
    &-error{
        color:#7d0808;
    }
    &-primary{
        color:var(--ph-primary);
    }
    &-danger{
        color:var(--ph-danger);
    }
    &-info{
        color:var(--ph-info);
    }
    &-warning{
        color:var(--ph-warning);
    }
    &-success{
        color:var(--ph-success);
    }
}
</style>